<template>
  <view class="navbar">
    <view class="title">
      星月陪诊陪护
    </view>
    <view class="content">
      <view class="area" @click="choiceCity">
        <image style="width: 50rpx;height:50rpx;margin-right:10rpx;background-color: transparent;"
          src="@/static/images/home/address.png" />
        <view style="height: 50rpx;line-height: 50rpx;">
          {{location.locationInfo.name}}
        </view>
        <view style="padding-top: 8rpx;padding-left:8rpx;">
          <uni-icons color="#fff" type="right" size="20"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    reactive,
    ref,
    onMounted
  } from 'vue'

  import {
    uselocation
  } from "@/stores/location.js";
 const location=uselocation()

  //获取城市信息
  onMounted(() => {
    //获取定位信息
     location.getLocationInfo()
  })

  function choiceCity() {
    uni.navigateTo({
      url: "/pages/index/region/region"
    })
  }
</script>

<style lang="scss" scoped>
  .navbar {
    height: 356rpx;
    background-color: #22b9a3;

    .title {
      position: absolute;
      top: 95rpx;
      left: 280rpx;
      font-size: $uni-font-size-title;
      font-family: 'siyuan';
      color: #fff
    }

    .content {
      position: absolute;
      top: 100rpx;
      left: 30rpx;

      .area {
        height: 47rpx;
        font-size: 32rpx;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
        display: flex;
      }

    }


  }
</style>